<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>应用管理
        <small>按项目划分的应用</small>
      </h1>
    </section>
  
    <!-- Main content -->
    <section class="content container-fluid">
      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
  
              <table class="table table-hover table-responsive">
                <caption>不同的项目/场景最好使用不同的应用，应用ID与密钥可以使用OPEN API连接。</caption>
                <thead>
                  <tr>
                    <th>APPID</th>
                    <th>名称</th>
                    <th>APPKEY</th>
                    <th>创建时间</th>
                    <th>管理</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in data" v-bind:title="item.note" :key="item.appid">
                    <td scope="row"><router-link :to="{name: 'AppDetail', params: {appid: item.appid}}" >{{item.appid}}</router-link></td>
                    <td>{{item.name}}</td>
                    <td>{{item.appkey | header}}</td>
                    <td>{{item.create_time}}</td>
                    <td>
                      <a href="javascript:;" @click="remove_app(item.appid)">
                        <i class="fa fa-fw fa-remove"></i> 删除</a>
                    </td>
                  </tr>
                  <tr v-if="data.length === 0">
                    <td colspan="6">暂空</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
  
        <!-- left column -->
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">新增应用</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form role="form">
              <div class="box-body">
                <div class="form-group">
                  <label for="appnameinput">应用名称</label>
                  <input type="text" class="form-control" id="appnameinput" placeholder="应用名称" v-model="newappname">
                </div>
                <div class="form-group">
                  <label for="noteinput">备注</label>
                  <textarea class="form-control" id="noteinput" v-model="newappnote" placeholder="备注信息"></textarea>
                </div>
              </div>
              <!-- /.box-body -->
  
              <div class="box-footer">
                <button type="submit" @click.prevent="add_new_app" class="btn btn-primary">Add</button>
              </div>
            </form>
          </div>
        </div>
      </div>
  
      <!-- /.box -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Apps',
  filters: {
    header: function(value) {
      return value.slice(0, 15);
    }
  },
  computed: {
    ...mapState({
      data: state => state.apps.data
    }),
  },
  data: function() {
    return {
      newappname: '',
      newappnote: '',
    };
  },
  methods: {
    reset_add_form() {
      this.newappname = '';
      this.newappnote = '';
    },
    add_new_app() {
      let args = {
        name: this.newappname,
        note: this.newappnote
      };
      this.$store.dispatch('add_app', args).then(response => {
        this.reset_add_form();
      }).catch(err => {
        console.log('add app failed.');
      });
    },
    remove_app(appid) {
      this.$store.dispatch('remove_app', appid);
    }
  },
  created() {
    document.title = "应用管理";
    this.$store.dispatch('load_apps');
  }
}
</script>
